<template>
  <div>
    <!-- 横幅部分保持不变 -->
    <div class="banner-container">
      <div class="banner-image">
        <div class="banner-text">
          <p class="title">场景解决方案</p>
          <p class="subtitle">联合提供适用于多场景、预集成、有成熟经验的产品与能力的组合，以满足企业发展的多方面需求</p>
        </div>
      </div>
    </div>
    <product-select type="hyjjfa"></product-select>

    <!-- 场景解决方案列表 -->
    <div class="solution-list-container">
      <div class="solution-grid">
        <div v-for="(solution, index) in paginatedData" :key="index" class="solution-card">
          <div class="solution-image">
            <img :src="solution.image" alt="解决方案图片">
          </div>
          <div class="solution-content">
            <div class="solution-header">
              <div class="solution-name">{{ solution.name }}</div>
              <div class="solution-desc">{{ solution.description }}</div>
            </div>
            <div class="solution-tags">
              <el-tag type="primary" size="small" v-for="(tag, tagIndex) in solution.tags" :key="tagIndex">
                {{ tag }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页组件 -->
      <div class="pagination-wrapper">
        <el-pagination
            background
            layout="prev, pager, next, sizes, total"
            :total="solutionData.length"
            :page-size="pageSize"
            :current-page="currentPage"
            :page-sizes="[4, 8, 12, 16]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <contact-footer></contact-footer>
  </div>
</template>

<script>
import ProductSelect from "@/view/productEmpowerment/model/productSelect.vue";
import ContactFooter from "@/view/homeComponents/banner.vue";

export default {
  name: "SceneSolution",
  components: {
    ContactFooter,
    ProductSelect
  },
  data() {
    return {
      solutionData: [
        {
          image: require('@/assets/empowermentCases/u3032.png'),
          name: '危化品安全生产风险监测预警解决方案',
          tags: ['安全生产', '工业互联网试点示范单位'],
          description: '基于“物联网+倾斜摄影+GIS地图+大数据”等先进技术，围绕危险化学品企业的重点危险源以及关键部位安全风险，通过接入企业实施监测数据和视频监...'
        },
        {
          image: require('@/assets/empowermentCases/u3032.png'),
          name: '数字工厂解决方案',
          tags: ['工业4.0', '智能制造', 'MES'],
          description: '助力制造企业实现数字化转型，提升生产效率和产品质量'
        },
        {
          image: require('@/assets/empowermentCases/u3032.png'),
          name: '智慧零售解决方案',
          tags: ['新零售', '数据分析', '无人店'],
          description: '整合线上线下零售资源，提供智能化的零售管理和客户服务方案'
        },
        {
          image: require('@/assets/empowermentCases/u3032.png'),
          name: '智慧医疗解决方案',
          tags: ['远程医疗', '电子病历', 'AI诊断'],
          description: '利用信息技术提升医疗服务效率和质量，改善患者就医体验'
        }
      ],
      currentPage: 1,
      pageSize: 4
    }
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.solutionData.slice(start, end);
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
}
</script>

<style scoped>
/* 横幅样式 */
.banner-container {
  width: 100%;
}

.banner-image {
  height: 200px;
  width: 100%;
  background-image: url('@/assets/empowermentCases/u2992_state0.png');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  position: relative;
}

.banner-text {
  text-align: left;
  color: white;
  padding: 10px;
  margin-left: 7%;
  width: 80%;
}

.title {
  font-size: 48px;
  font-weight: 400;
  margin-bottom: 10px;
  color: #ffffff;
  text-align: left;
}

.subtitle {
  font-size: 24px;
  font-weight: 400;
  color: #ffffff;
  text-align: left;
}

/* 解决方案列表样式 - 严格左对齐 */
.solution-list-container {
  max-width: 1240px;
  margin: 30px auto;
  padding: 0 20px;
}

.solution-grid {
  display: grid;
  grid-template-columns: repeat(2, 600px);
  justify-content: center;
  gap: 40px 20px;
}

.solution-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  width: 600px;
  height: 205px;
  text-align: left; /* 全局左对齐 */
}

.solution-image {
  width: 208px;
  height: 168px;
  margin: 18px 0 0 18px;
}

.solution-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.solution-content {
  width: calc(600px - 208px - 36px);
  padding: 20px 18px 20px 20px;
  display: flex;
  flex-direction: column;
  text-align: left; /* 内容区域左对齐 */
}

.solution-header {
  margin-bottom: 10px;
  text-align: left; /* 确保左对齐 */
}

.solution-name {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
  margin-top: 10px;
  line-height: 1.3;
  text-align: left; /* 标题左对齐 */
}

.solution-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left; /* 描述左对齐 */
}

.solution-tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: auto;
  gap: 8px;
  justify-content: flex-start; /* 标签左对齐 */
}

/* 分页样式 */
.pagination-wrapper {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 1300px) {
  .solution-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .solution-card {
    width: 100%;
    max-width: 600px;
  }

  .solution-content {
    width: calc(100% - 208px - 36px);
  }
}

@media (max-width: 768px) {
  .solution-card {
    height: auto;
    flex-direction: column;
    padding-bottom: 20px;
  }

  .solution-image {
    margin: 20px auto 0;
  }

  .solution-content {
    width: calc(100% - 40px);
    padding: 20px;
  }

  .title {
    font-size: 36px;
  }

  .subtitle {
    font-size: 18px;
  }
}
</style>